<template>
	<view class="content">
		<!-- 手动制作系统状态栏-->
		<!--#ifdef APP-PLUS -->
		<view class="statusBar"></view>
		<!--#endif -->
		<view class="topNav">
			<view :class="{active:pageType==0}" @tap="pageType=0">推荐</view>
			<view :class="{active:pageType==1}" @tap="pageType=1">视频</view>
			<view :class="{active:pageType==2}" @tap="pageType=2">图片</view>
			<view :class="{active:pageType==3}" @tap="pageType=3">笑话</view>
		</view>
		<swiper class="indexSwiper" :current="pageType" @change="swiperChange">
			<swiper-item>
				<scroll-view @scroll="scrollViewChange" style="height: 100%;overflow-y: auto;" scroll-y>
					<post-item v-for="(item,index) in tuijianList" :key="item.id" :p_item="item"></post-item>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view @scroll="scrollViewChange" style="height: 100%;overflow-y: auto;" scroll-y>
					<post-item v-for="(item,index) in videoList" :key="item.id" :p_item="item"></post-item>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view @scroll="scrollViewChange" style="height: 100%;overflow-y: auto;" scroll-y>
					<post-item v-for="(item,index) in imageList" :key="item.id" :p_item="item"></post-item>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view @scroll="scrollViewChange" style="height: 100%;" scroll-y>
					<post-item v-for="(item,index) in xiaohuaList" :key="item.id" :p_item="item"></post-item>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	//现在在这里，我们要使用这个组件
	//导入组件  相当于小程序里面的usingComponents
	import postItem from "../../components/postItem/postItem.vue";
	//需要在下面注册一下组件

	export default {
		//小程序里面，是真写在data就可以了，而在这里，要写在return里面
		data() {
			return {
				//0代表的是就是推荐
				pageType: 0,
				//保存推荐的贴子
				tuijianList: [],
				videoList: [],
				imageList: [],
				xiaohuaList: [],
				//只在贴子的ID区间，以便继续获取记录
				tuijianIds: uni.getStorageSync("tuijianIds") || "0-0", //推荐Id区间
				videoIds: uni.getStorageSync("videoIds") || "0-0", //视频Id区间
				imageIds: uni.getStorageSync("imageIds") || "0-0", //图片Id区间
				xiaohuaIds: uni.getStorageSync("xiaohuaIds") || "0-0" //笑话Id区间
			}
		},
		onLoad() {
			this.tuijianList = uni.getStorageSync("tuijianList");
			this.videoList = uni.getStorageSync("videoList");
			this.imageList = uni.getStorageSync("imageList");
			this.xiaohuaList = uni.getStorageSync("xiaohuaList");
			//第一次只判断推荐页的数据，并加载推荐页在数据
			if (this.tuijianList == null || this.tuijianList.length == 0) {
				this.getTuiJian();
			}

		},
		onPullDownRefresh() {
			//停止下拉刷新
			if (this.pageType == 0) {
				this.getTuiJian();
			} else if (this.pageType == 1) {
				this.getShiPin();
			} else if (this.pageType == 2) {
				this.getTuPian();
			} else if (this.pageType == 3) {
				this.getXiaoHua();
			}
			uni.stopPullDownRefresh();
		},
		//代表组件里面的方法
		methods: {
			//请求推荐
			getTuiJian() {
				uni.showLoading({
					title: "正在加载"
				});
				var TUIJIAN_URL =
					`https://www.softeem.xin/s/v2/topic/list/1/${this.tuijianIds}/budejie-android-8.0.1/0-25.json?device=MIX&t=${Date.now()}&appname=budejie&market=baidu&client=android&uid=&udid=863595494315117&from=android&ver=8.0.1&jdk=1`;
				uni.request({
					url: TUIJIAN_URL,
					success: res => {
						//保存数据
						this.tuijianList = res.data.list; 
						if (this.tuijianList && this.tuijianList.length > 0) {
							//放入缓存
							uni.setStorageSync("tuijianList", this.tuijianList);
							//保存id区间，以便下次查询
							this.tuijianIds = this.tuijianList[0].id + "-" + this.tuijianList[this.tuijianList.length - 1].id;
							//放入缓存
							uni.setStorageSync("tuijianIds", this.tuijianIds);
						}
					},
					complete: () => {
						uni.hideLoading();
					},
					fail: () => {
						uni.showToast({
							title: "获取数据失败"
						});
					}
				})
			},
			//请求视频
			getShiPin() {
				uni.showLoading({
					title: "正在加载"
				});
				var SHIPING_URL =
					`https://www.softeem.xin/s/v2/topic/list/41/${this.videoIds}/budejie-android-8.0.1/0-25.json?device=MIX&t=${Date.now()}&appname=budejie&market=baidu&client=android&uid=&udid=863595494315117&from=android&ver=8.0.1&jdk=1`;
				uni.request({
					url: SHIPING_URL,
					success: res => {
						this.videoList = res.data.list;
						if (this.videoList && this.videoList.length > 0) {
							//放入缓存
							uni.setStorageSync("videoList", this.videoList);
							this.videoIds = this.videoList[0].id + "-" + this.videoList[this.videoList.length - 1].id;
							//放入缓存
							uni.setStorageSync("videoIds", this.videoIds);
						}
					},
					complete: () => {
						uni.hideLoading();

					},
					fail: () => {
						uni.showToast({
							title: "获取数据失败"
						});
					}
				});
			},
			//获取图片
			getTuPian() {
				uni.showLoading({
					title: "正在加载"
				});
				var TUPIAN_URL =
					`https://www.softeem.xin/s/v2/topic/list/10/${this.imageIds}/budejie-android-8.0.1/0-25.json?device=MIX&t=${Date.now()}&appname=budejie&market=baidu&client=android&uid=&udid=863595494315117&from=android&ver=8.0.1&jdk=1`;
				uni.request({
					url: TUPIAN_URL,
					success: res => {
						this.imageList = res.data.list;
						if (this.imageList && this.imageList.length > 0) {
							//放入缓存
							uni.setStorageSync("imageList", this.imageList);
							this.imageIds = this.imageList[0].id + "-" + this.imageList[this.imageList.length - 1].id;
							//放入缓存
							uni.setStorageSync("imageIds", this.imageIds);
						}
					},
					complete: () => {
						uni.hideLoading();

					},
					fail: () => {
						uni.showToast({
							title: "获取数据失败"
						});
					}
				});
			},
			//请求笑话
			getXiaoHua() {
				uni.showLoading({
					title: "正在加载"
				});
				var XIAOHUA_URL =
					`https://www.softeem.xin/s/v2/topic/list/29/${this.xiaohuaIds}/budejie-android-8.0.1/0-25.json?device=MIX&t=${Date.now()}&appname=budejie&market=baidu&client=android&uid=&udid=863595494315117&from=android&ver=8.0.1&jdk=1`;
				uni.request({
					url: XIAOHUA_URL,
					success: res => {
						this.xiaohuaList = res.data.list;
						if (this.xiaohuaList && this.xiaohuaList.length > 0) {
							//放入缓存
							uni.setStorageSync("xiaohuaList", this.xiaohuaList);
							this.xiaohuaIds = this.xiaohuaList[0].id + "-" + this.xiaohuaList[this.xiaohuaList.length - 1].id;
							//放入缓存
							uni.setStorageSync("xiaohuaIds", this.xiaohuaIds);
						}
					},
					complete: () => {
						uni.hideLoading();

					},
					fail: () => {
						uni.showToast({
							title: "获取数据失败"
						});
					}
				});
			},
			swiperChange(event) {
				this.pageType = event.detail.current;
			},
			//scrollView滑动事件
			scrollViewChange(event) {
				//#ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				if (event.detail.scrollTop <= 10) {
					currentWebview.setStyle({
						pullToRefresh: {
							support: true,
							style: plus.os.name === 'Android' ? 'circle' : 'default'
						}
					});
				} else {
					currentWebview.setStyle({
						pullToRefresh: {
							support: false
						}
					});
				}
				//#endif
			}
		},
		watch: {
			pageType(newValue) {
				if (newValue == 0 && (this.tuijianList == null || this.tuijianList.length == 0)) {
					this.getTuiJian();
				} else if (newValue == 1 && (this.videoList == null || this.videoList.length == 0)) {
					this.getShiPin();
				} else if (newValue == 2 && (this.imageList == null || this.imageList.length == 0)) {
					this.getTuPian();
				} else if (newValue == 3 && (this.xiaohuaList == null || this.xiaohuaList.length == 0)) {
					this.getXiaoHua();
				}
			}
		},
		components: {
			postItem: postItem
		}
	}
</script>

<style scoped>
	.statusBar {
		width: 100%;
		background-color: #f2f2f2;
		/* 调用CSS变量 做到沉浸式状态栏 */
		height: var(--status-bar-height);
	}

	.topNav {
		display: flex;
		/*小程序里面是rpx,在这里是upx 大小是一样的*/
		font-size: 28upx;
		height: 80upx;
		border-bottom: 2upx solid lightgray;
		flex-direction: row;
		justify-content: space-around;
	}

	.topNav>view {
		height: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.topNav>view.active {
		border-bottom: 5upx solid red;
		font-weight: bold;
	}

	.indexSwiper {
		/*剩下部分的全部区域*/
		flex: 1;
		overflow: hidden;
	}

	.indexSwiper swiper-item {
		background-color: #F2F2F2;
	}

	.content {
		/* 弹性盒子 */
		display: flex;
		flex-direction: column;
		height: 100%;
	}
</style>
